<template>
  <!-- 轮播图 -->
  <SwiperHome :list="(homeData?.data.focusList)" v-if="homeData?.data.focusList"></SwiperHome>
  <!-- 承诺 -->
  <div class="m-indexServicePolicy">
    <ul class="g-grow flex">
      <li class="item flex">
        <i class="u-icon icon-1"></i>
        <span class="text">网易自营品牌</span>
      </li>
      <li class="item flex">
        <i class="u-icon icon-2"></i>
        <span class="text">30天无忧退货</span>
      </li>
      <li class="item flex">
        <i class="u-icon icon-3"></i>
        <span class="text">48小时快速退款</span>
      </li>
    </ul>
  </div>

  <!-- 导航分类图标 -->
  <div class="icon_classify_container flex">
    <HomeClassiyfIcon v-for="item in homeData?.data.kingKongModule.kingKongList" :iconItem="item"></HomeClassiyfIcon>
  </div>

  <!-- 活动板块 -->
  <div class="actions_model_content">
    <div class="default_action" v-for="item in homeData?.data.bigPromotionModule?.floorList[0].cells" :key="item.id"
      :style="`background-image: url(${item.picUrl});`">
      <a href="javascript:;">
        <img v-lazy="item.itemList[0].picUrl">
      </a>
    </div>
    <div class="surplus_actions flex">
      <div class="surplus_item1" v-for="item in homeData?.data.bigPromotionModule?.floorList[1].cells" :key="item.id"
        :style="`background-image: url(${item.picUrl});`">
        <a href="javascript:;">
          <img v-lazy="item.itemList[0].picUrl">
        </a>
      </div>
    </div>
  </div>

  <!-- 页面主题内容区 -->
  <div class="mian_content_container">
    <!-- 新人专享板块 -->
    <div class="new_user_actions_container">
      <div class="title">
        <span> — 新人专享礼 —</span>
      </div>
      <!-- 内容区 -->
      <div class="actions_content flex">
        <!-- 左侧内容区 -->
        <div class="left_container">
          <div class="action_item_title">新人专享礼包</div>
          <div class="img_info">
            <img src="//yanxuan.nosdn.127.net/static-union/1648017994dd2933.png">
          </div>
        </div>
        <!-- 右侧内容区 -->
        <div class="right_container flex_c">
          <div class="right_item_content flex" v-for="item in homeData?.data.indexActivityModule" :key="item.title">
            <div>
              <div class="title_item">{{ item.title }}</div>
              <div class="intro">{{ item.tag ? item.tag : item.subTitle }}</div>
            </div>
            <div class="img_price">
              <img class="item_img" v-lazy="item.picUrl">
              <div class="new_price">
                <div>{{ item.activityPrice }}</div>
                <div class="dis_price">{{ item.originPrice ? item.originPrice : '￥19.9' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 热销榜板块 -->
    <div class="hot_sole_container">
      <div class="hot_sole_title">{{ homeData?.data.categoryHotSellModule.title }}</div>
      <div class="hot_sole_main_content">
        <!-- 上方主要内容 -->
        <div class="top_hot_sole_content">
          <van-grid direction="horizontal" :column-num="2" reverse icon-size="100px" :border="false">
            <van-grid-item v-for="(item, index) in homeData?.data.categoryHotSellModule.categoryList" :key="index"
              v-show="index < 2" :icon="item.picUrl" :text="item.categoryName" />
          </van-grid>
        </div>
        <!-- 下方热销列表 -->
        <div class="buttom_hot_sole_content">
          <van-grid :gutter="3" reverse icon-size="60px" square :border="false">
            <van-grid-item v-for="(item, index) in homeData?.data.categoryHotSellModule.categoryList" :key="index"
              v-show="index > 2" :icon="item.picUrl" :text="item.categoryName" />
          </van-grid>
        </div>
      </div>
    </div>
    <!-- 严选直播 -->
    <div class="travel_living_container flex">
      <!-- 趣出游 -->
      <div class="left_travel_content flex_c">
        <div class="travel_title">{{ homeData?.data.sceneLightShoppingGuideModule[0].styleBanner?.title }}</div>
        <div class="travel_new_goods">{{ homeData?.data.sceneLightShoppingGuideModule[0].styleBanner?.desc }}</div>
        <div class="travel_img">
          <img :src="homeData?.data.sceneLightShoppingGuideModule[0].styleBanner?.picUrl">
        </div>
      </div>
      <!-- 严选直播 -->
      <div class="right_living_content">
        <div class="living_title">{{ homeData?.data.sceneLightShoppingGuideModule[1].styleItem!.title }}</div>
        <div class="living_introduction">{{ homeData?.data.sceneLightShoppingGuideModule[1].styleItem!.desc }}</div>
        <div class="living_imgs flex">
          <img v-for="item in homeData?.data.sceneLightShoppingGuideModule[1].styleItem!.picUrlList" v-lazy="item">
        </div>
      </div>

    </div>
    <!-- 为你精选 --- 没有数据 -->
    <!-- <div class="goods_list_container">
      <div class="goods_list_title">为你精选</div>
      <div class="goods_list_content ">
        <HomeGoodsList>
          <slot>
            <HomeGoodsItem></HomeGoodsItem>
            <HomeGoodsItem></HomeGoodsItem>
            <HomeGoodsItem></HomeGoodsItem>
          </slot>
        </HomeGoodsList>
      </div>
    </div> -->

  </div>

  <!-- 数据请求时，显示遮罩层 -->
  <div class="mask_data_loading" v-if="data_show">
    <div class="loading_text">
      <van-loading size="24px">加载中...</van-loading>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from "vue";
import HomeClassiyfIcon from '@/components/home-classify-icon/index.vue'
import { homeApi, type HomeDataModel } from '@/api/home';


/* 设置响应式数据 */
// 用来控制首页是否显示登录按钮的变量
const showLoginBtn = ref(true)
// 首页需要展示的数据
const homeData = ref<HomeDataModel>()
// 控制数据加载中的数据
const data_show = ref(false)

/* 生命周期钩子函数 */
onMounted(() => {
  getHomeData()
  showLoginBtn.value = !(localStorage.getItem('token') as string)
})

/* 发送请求的功能函数 */
async function getHomeData() {
  try {
    data_show.value = true
    let result = await homeApi.getHomeData();
    homeData.value = result
    data_show.value = false
  } catch (error) {
    console.error(error)
    data_show.value = false
  }
}

</script>

<style scoped lang="less">
// 轮播图
.swiper_container {
  width: 100%;

  img {
    width: 100%
  }

  /deep/ .van-swipe__indicator {
    width: 20px;
    height: 2px;
  }
}

// 承诺
.m-indexServicePolicy {
  height: 1rem;

  .g-grow {
    justify-content: space-evenly;
    height: 100%;

    .item {
      height: 100%;

      font-size: 12px;
      align-items: center;

      .u-icon {
        width: 0.43rem;
        height: 0.43rem;
        background-size: 0.48rem;
        margin-right: 4px;

        &.icon-1 {
          background-image: url('@/assets/1.png');
        }

        &.icon-2 {
          background-image: url('@/assets/2.png');
        }

        &.icon-3 {
          background-image: url('@/assets/3.png');
        }
      }
    }
  }
}

// 导航分类图标
.icon_classify_container {
  height: 4.66rem;
  justify-content: space-around;
  flex-wrap: wrap;
}

// 活动板块
.actions_model_content {
  margin-bottom: 10px;

  // 默认活动
  .default_action {
    background-size: 100%;
    height: 2.67rem;

    img {
      position: relative;
      width: 2.24rem;
      left: 1.1rem;
      top: 0.374rem;
      height: 2.24rem;
    }
  }

  // 剩余活动
  .surplus_actions {
    margin: 0.2rem;
    justify-content: space-between;

    .surplus_item1 {
      position: relative;
      display: block;
      width: 115.5px;
      height: 110px;
      background-repeat: no-repeat;
      background-size: 100%;

      img {
        position: absolute;
        bottom: 0;
        left: 25%;
        width: 70px;
        height: 70px;
      }
    }
  }
}

// 页面主体内容区
.mian_content_container {

  // 新人专享板块
  .new_user_actions_container {
    margin: 10px 0;
    padding-bottom: 15px;

    .title {
      height: 45px;
      line-height: 45px;
      text-align: center;
      font-size: 16px;
    }

    // 新人专享内容区
    .actions_content {
      height: 219px;
      width: 375px;

      // 左侧内容区
      .left_container {
        border-radius: 1%;
        margin-left: 15px;
        margin-right: 2px;

        background: #F9E9CF;
        height: 100%;
        width: 171.5px;

        .action_item_title {
          font-size: 16px;
          padding: 15px 0 0 15px;
        }

        .img_info {

          margin: 20px 0 0 20px;

          img {
            width: 129px;
          }
        }
      }

      // 右侧内容区
      .right_container {
        width: 171.5px;
        justify-content: space-evenly;

        .right_item_content {
          border-radius: 2%;
          padding-left: 15px;
          padding-bottom: 0.6px;
          background: #FBE2D3;
          height: 107.5px;
          position: relative;


          .title_item {

            margin-top: 10px;
            font-size: 16px;
            overflow: hidden;
            white-space: nowrap;
            position: relative;
            z-index: 1;
          }

          .intro {
            font-size: 12px;
            position: relative;
            z-index: 1;
          }

          .img_price {
            margin-top: 10px;
            position: absolute;
            right: 0;
            bottom: -5px;

            .new_price {
              width: 40px;
              height: 40px;
              font-size: 12px;
              position: absolute;
              top: 0;
              right: 10px;
              background: #F7A644;
              padding-top: 2px;
              border-radius: 50%;

              .dis_price {
                text-decoration: line-through;
              }

              &>div {
                height: 18px;
                line-height: 18px;
                text-align: center;
                color: #fff;
              }
            }

            img {
              width: 100px;
              height: 100px;
            }
          }

        }
      }
    }

  }

  // 热销榜
  .hot_sole_container {
    height: 355px;

    .hot_sole_title {
      padding: 0 15px;
      width: 80px;
      font-size: 16px;
      height: 50px;
      line-height: 50px;
    }

    // 热销内容区
    .hot_sole_main_content {
      height: 100px;
      margin: 2px 10px;

      // 热销内容区-上方
      .top_hot_sole_content {
        margin-bottom: 5px;

        .van-grid-item.item2 /deep/ .van-grid-item__content {
          background: #EBEFF6;
        }

        /deep/ .van-grid-item__content {
          background: #F9F3E4;
          padding: 0;
          margin-right: 2px;


          .van-grid-item__text {
            font-size: 12px;
          }
        }



      }
    }

    // 热销内容区-下方
    /deep/ .van-grid-item {
      height: 90px;

      .van-grid-item__content {
        background: #F5F5F5;
      }

      .van-grid-item__text {
        margin: 0;
      }
    }

  }

  // 趣出游 - 严选直播
  .travel_living_container {
    padding: 5px 15px 15px 13px;
    margin-bottom: 10px;

    // 左侧 -- 趣出游
    .left_travel_content {
      width: 120px;
      height: 111px;
      padding: 12px 0;
      align-items: center;
      justify-content: space-evenly;
      background: #F5F5F5;

      .travel_title {
        font-size: 16px;
      }

      .travel_new_goods {
        font-size: 12px;
        color: #7F7F7F;
      }

      .travel_img {

        img {
          width: 72px;
          height: 72px;
        }
      }
    }

    // 右侧 -- 严选直播
    .right_living_content {
      width: 195px;
      height: 111px;
      background: #F5F5F5;
      padding: 12px 0;
      padding-left: 25px;
      margin-left: 5px;

      .living_title {
        font-size: 16px;
      }

      .living_introduction {
        font-size: 12px;
        color: #7F7F7F;
      }

      .living_imgs {

        img {
          width: 72px;
          height: 72px;
          margin-right: 25px;
        }

      }
    }
  }

  // 为你精选
  .goods_list_container {

    .goods_list_title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-left: 10px;
      margin-bottom: 10px;
    }
  }
}

// 数据加载中的遮罩层
.mask_data_loading {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f6f6f6;

  .loading_text {
    background: #fff;
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 5px;
    position: absolute;
    left: 36%;
    top: 44%;

  }
}
</style>